<template>
<div id="FirstPage">
  <main-header :title="`你好！${userInfo.nickname}，祝你开心每一天！`" :crumbsArr="crumbsArr" />

  <div class="main" ref="main">
      <div class="main_block">
        <div class="deal_block">
          <el-input v-model="telephone" placeholder="请输入手机号查询" style="width: 400px;"></el-input>
          <el-button type="primary" style="margin-left: 10px;" @click="loadData" :disabled="!!!telephone">查 询</el-button>
        </div>
        <div class="report_table" v-loading="dataLoading">
          <el-table
            border
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="createdate"
              label="创建时间">
            </el-table-column>
            <el-table-column
              prop="orderno"
              label="订单编号">
            </el-table-column>
            <el-table-column
              prop="nickname"
              label="下单人">
            </el-table-column>
            <el-table-column
              prop="telephone"
              label="手机号">
            </el-table-column>
            <el-table-column
              prop="ordername"
              label="订单名称">
            </el-table-column>
            <el-table-column
              prop="saleOrderDetailList[0].totalPrice"
              label="总金额">
            </el-table-column>
            <el-table-column
              prop="saleOrderDetailList[0].totalCredit"
              label="总积分">
            </el-table-column>
            <el-table-column
              label="订单类型">
              <template slot-scope="scope">
                {{scope.row.saleItemType | handleSaleItemType}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
</div>
</template>

<script>
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
import MainHeader from '@/components/layouts/MainHeader'
export default {
  name: 'FirstPage',
  data () {
    return {
      crumbsArr: [ // 面包屑
        { name: 'welcome', txt: '首页' }
      ],
      userInfo: JSON.parse(window.sessionStorage.getItem('userInfo')),
      tableData: null,
      dataLoading: false,
      telephone: ''
    }
  },
  components: {
    MainHeader
  },
  filters: {
    handleSaleItemType (value) {
      switch (value) {
        case 0:
          return '商品'
        case 1:
          return '服务'
        case 2:
          return '礼品'
        case 3:
          return '兑换券'
      }
    }
  },
  methods: {
    async loadData () { // 加载数据
      const { telephone } = this
      const reg = /^1\d{10}$/
      if (!reg.test(telephone)) {
        this.$message({
          type: 'warning',
          message: '手机号格式不正确'
        })
        return false
      }
      this.dataLoading = true
      const response = await API.querySpendOrderReport({ telephone })
      this.dataLoading = false
      const { code, data } = response
      if (code === 1) {
        this.tableData = data.rows
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
#FirstPage {
  height: 100%;
  // background: url("../../assets/image/welcome.png") no-repeat;
  // background-position: center center;
}

.main {
  padding: 20px 20px 0;
  .main_block {
    min-height: 410px;
    padding: 20px;
    background: #fff;
  }
  .deal_block {
    text-align: right;
  }
  .report_table {
    margin-top: 20px;
  }

  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
